<template>
  <div class="associateInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>毕业设计</el-breadcrumb-item>
      <el-breadcrumb-item>调整毕设</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="margin-bottom:50px">
      <h2 class="left_title">
        课题名称&nbsp;&nbsp;&nbsp;<span>{{ titleInfo.graduateTitle}}</span>
      </h2>
      <h2 class="right_title">
        课题来源&nbsp;&nbsp;&nbsp;<span>{{ titleInfo.titleSource }}</span>
      </h2>
    </div>
    <div style="margin-bottom:50px">
      <h2 class="left_title">
        要求人数&nbsp;&nbsp;&nbsp;<span>{{ titleInfo.num }}</span>
      </h2>
      <h2 class="right_title">
        负责教师&nbsp;&nbsp;&nbsp;<span>{{ titleInfo.teacherName}}</span>
      </h2>
    </div>
    <div style="clear:both"></div>
    <div class="mb-6">
      <el-button class="float-right" type="primary" @click="openStudent">增加学生</el-button>
      <el-button class="float-right mr-6" type="primary" @click="sbumit">确认提交</el-button>
      <div style="clear:both"></div>
    </div>
    <el-table
      :data="studentTable"
      border
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column
        prop="studentName"
        label="学生姓名"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="studentID"
        label="学号"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="className"
        label="班级"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式"
        min-width="120">
      </el-table-column>
      <el-table-column
        label="操作">
        <template scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index,studentTable,scope.row.studentID)"
            type="text"
            size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="学生信息" v-model="dialogTableVisible">
      <el-table :data="studentData">
        <el-table-column property="studentName" label="学生姓名" width="150"></el-table-column>
        <el-table-column property="studentID" label="学号" width="200"></el-table-column>
        <el-table-column property="className" label="班级"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button @click.native.prevent="addStudent(scope.$index,studentData,scope.row.studentID)" type="text">
              添加至课题
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>

</template>
<script>
  export default{
    name: 'associateInfo',
    data(){
      return {
        titleInfo: {
          graduateTitle: '教研室管理系统',
          titleSource: '数据库',
          num: 20,
          teacherName: 'Blue'
        },
        studentTable: [{
          graduateProgramID: '',
          graduateTitle: '',
          titleSource: '',
          num: '',
          teacherName: '',
          studentName: '',
          studentID: '',
          className: '',
          phone: ''
        }
        ],
        studentData: [
          {
            studentName: '',
            studentID: '',
            className: ''
          }
        ],
        dialogTableVisible: false,
        apiUrl: this.$until.url + '/graduateProgram/getStudentInGraduate',
        initUrl: this.$until.url + '/graduateProgram/getStudentNOBelong',
        deleteUrl: this.$until.url + '/graduateProgram/teacherChooseStudentDelete',
        addUrl: this.$until.url + '/graduateProgram/teacherChooseStudentAdd',
        confirmUrl: this.$until.url + '/graduateProgram//teacherChooseStudent',
        graduateProgramID: '',
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.init()
      });
    },
    methods: {
      init(){
        this.res();
        this.getStudentInfo();
      },
      res(){
        this.graduateProgramID = this.$route.query.graduateProgramID;
        this.$http.get(this.apiUrl, {
            params: {
              graduateProgramID: this.graduateProgramID
            }
          }
        ).then((res) => {
          //console.log(res)
          this.studentTable = res.body;
          this.titleInfo = res.body[0]
        }, (err) => {
          console.log('服务器异常')
        })
      },
      getStudentInfo(){
        this.$http.get(this.initUrl, {
            params: {
              graduateProgramID: this.graduateProgramID
            }
          }
        ).then((res) => {
          //console.log(res)
          this.studentData = res.body;
        }, (err) => {
          console.log('服务器异常')
        })
      },
      addStudent(index, rows, studentID){
        this.$http.post(this.addUrl,
          {
            graduateProgramID: this.graduateProgramID,
            studentID: studentID
          },
          {emulateJSON: true}
        ).then((res) => {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success'
          });
          rows.splice(index, 1);
          this.res();
        }, (err) => {
          this.$notify.error({
            title: '错误',
            message: '添加失败'
          });
        })
      },
      deleteRow(index, rows, studentID) {
        this.$confirm('是否删除该学生?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(this.deleteUrl,
            {
              graduateProgramID: this.graduateProgramID,
              studentID: studentID
            },
            {emulateJSON: true}
          ).then((res) => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
            rows.splice(index, 1);
            this.getStudentInfo()
          }, (err) => {
            this.$notify.error({
              title: '错误',
              message: '删除失败'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      sbumit(){
        var studentTable = this.studentTable,studentIDS='';
        for (var i = 0, len = studentTable.length; i < len; i++) {
          studentIDS+=studentTable[i].studentID+','
        }
        this.$http.post(this.confirmUrl,
          {
            graduateProgramID: this.graduateProgramID,
            studentID:  studentIDS
          },
          {emulateJSON: true}
        ).then((res) => {
          this.$notify({
            title: '成功',
            message: '提交成功',
            type: 'success'
          });
        }, (err) => {
          this.$notify.error({
            title: '错误',
            message: '提交失败'
          });
        })
      },
      openStudent(){
      	if(this.studentTable.length < this.titleInfo.num){
      		this.dialogTableVisible=true;
      	}else{
      		this.$message({
          message: '所选学生已达到要求人数',
          type: 'warning'
        });
      	}
      }
    }
  }
</script>
<style>
  .left_title {
    color: royalblue;
    float: left;
    margin-right: 30px;
  }

  .right_title {
    color: royalblue;
    float: left
  }

  .left_title span, .right_title span {
    color: orangered
  }
</style>
